<template>
  <transition name="fade">
    <div class="seachOrder">
      <div class="seachBox">
        <div class="seachInput">
          <input
            type="text"
            placeholder="Seach Like Music~"
            v-model="seachValue"
            @keyup.enter="enterValue"
          />
        </div>

        <div class="seachInfo">
          <div
            class="seaInfoText"
            v-for="(item, index) in cationList"
            :key="index"
            @click="seachInfoActine(item, index)"
            :class="[item.isSeachActive ? 'isSeachActive' : '']"
          >
            <div class="seaInfo-img">
              <img class="auto-img" :src="item.img" alt="" />
            </div>
            <div class="text">{{ item.text }}</div>
          </div>
        </div>
        <div class="seachWhite" v-if="seachValue == ''">数据空空如也！</div>
        <!-- <div v-else > -->
        <div v-else class="seachList" id="seachList">
          <SeachPlayList
            :listData="arr"
            :albumData="AlbumArr"
            :activeIndex="Aindex"
            :artists="Artists"
            :playlists="Playlists"
            ref="SeachPlayList"
          />
        </div>
        <!-- </div> -->
      </div>
    </div>
  </transition>
</template>

<script>
// http://music.163.com/api/search/get/web?csrf_token=hlpretag=&hlposttag=&s=淘汰&type=1&offset=0&total=true&limit=2
import SeachPlayList from "./SeachPlayList.vue";
import { getMusicInfo } from "@/Api/seachApi.js";
import { Message } from 'element-ui';

export default {
  name: "SeachOrder",
  components: {
    SeachPlayList,
  },
  data() {
    return {
      //
      seachValue: "",
      ID: "",
      arr: [],
      // 传递专辑数据
      AlbumArr: [],
      // 传递歌手数据
      Artists: [],
      // 传递歌单列表
      Playlists: [],
      // 搜索分类列表
      cationList: [
        {
          img: require("../../assets/image/icon/icon-test.png"),
          text: "歌曲",
          isSeachActive: true,
        },
        {
          img: require("../../assets/image/icon/zhuanji.png"),
          text: "专辑",
          isSeachActive: false,
        },
        {
          img: require("../../assets/image/icon/geshou.png"),
          text: "歌手",
          isSeachActive: false,
        },
        {
          img: require("../../assets/image/icon/gedan.png"),
          text: "歌单",
          isSeachActive: false,
        },
      ],
      // 下标
      Aindex: 0,
    };
  },

  computed: {
    // 获取audio标签
    getAudioElement() {
      return this.$store.state.musicState.audioElement;
    },
  },
  methods: {
    //输入时的默认搜索
    enterValue() {
      if (this.Aindex == 0) {
        this.arr = [];
        // 传递专辑数据
        this.AlbumArr = [];
        // 传递歌手数据
        this.Artists = [];
        // 传递歌单列表
        this.Playlists = [];

        this.getMusic(1);
        // this.getMusic(10);
        // this.getMusic(100);
        // this.getMusic(1000);
      }
    },

    // 搜索的歌曲
    getMusic(typeID) {
      if (this.seachValue === "") {
        Message.warning("请输入后查询")
        return
      };
      // console.log(type);
      const loading = this.$loading({
        background: "rgba(0,0,0,0.6)",
        text: "正在加载中...",
        spinner: "el-icon-loading",
        target: "#seachList", //局部加載效果
      });
      getMusicInfo({ keywords: this.seachValue, type: typeID })
        .then((res) => {
          setTimeout(() => {
            loading.close();
            if (typeID == 1) {
              let data = res.result.songs;
              //   获取歌曲列表的ID
              data.map((v) => {
                // console.log(v.id);
                this.arr.push(v.id);
              });
            } else if (typeID == 10) {
              this.AlbumArr = res.result.albums;
            } else if (typeID == 100) {
              this.Artists = res.result.artists;
            } else if (typeID == 1000) {
              this.Playlists = res.result.playlists;
            }

            this.$refs.SeachPlayList.getMusicDetail();
          }, 300);
        })
        .catch((err) => {
          loading.close();
          console.log(err);
        });
    },

    // 点击切换
    seachInfoActine(item, index) {
      console.log("item, index", item, index);
      // if (condition) {

      // }
      for (let i = 0; i < this.cationList.length; i++) {
        if (this.cationList[i].isSeachActive) {
          this.cationList[i].isSeachActive = false;
          break;
        }
      }
      this.Aindex = index;
      item.isSeachActive = true;

      if (index == 0) {
        this.arr = [];
        this.getMusic(1);
      } else if (index == 1) {
        this.AlbumArr = [];
        this.getMusic(10);
      } else if (index == 2) {
        this.Artists = [];
        this.getMusic(100);
      } else if (index == 3) {
        this.Playlists = [];
        this.getMusic(1000);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.seachOrder {
  height: 100%;
  width: 100%;

  box-sizing: border-box;
  // padding: 30px;
  position: relative;

  .seachBox {
    height: 100%;
    min-width: 580px;
    // background-color: purple;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 30px;
  }

  .seachInput {
    input {
      width: 100%;
      height: 60px;
      border: none;
      border-bottom: 1px solid #dadada;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      background-color: rgba(0, 0, 0, 0);
      font-size: 26px;
      text-indent: 2ch;
      color: #fff;
      outline: none;
    }
    input::-webkit-input-placeholder {
      color: #dadada;
    }
  }
  .seachInfo {
    width: 100%;
    height: 50px;
    line-height: 50px;
    display: flex;
    // background-color: #fff;

    .seaInfoText {
      flex: 1;
      height: 100%;
      font-size: 20px;
      box-sizing: border-box;
      margin: 0 20px;
      color: #d6d6d4;
      // display: flex;
      cursor: pointer;
      &:hover {
        border-bottom: 3px solid #fc5531;
      }

      > div {
        display: inline-block;
        vertical-align: middle;
        line-height: 30px;
      }
      .seaInfo-img {
        margin-right: 2px;
        width: 28px;
        height: 28px;
        margin-bottom: 6px;
      }
    }
  }
  .seachWhite {
    width: 100%;
    margin-top: 20px;
    font-size: 26px;
  }
  .seachList {
    width: 100%;
    height: calc(100% - 126px);
    margin-top: 10px;
    overflow-x: hidden;
    overflow-y: scroll;

    // 滚动不产生滚动条兼容
    &::-webkit-scrollbar {
      width: 0px;
    }
    &::-o-scrollbar {
      width: 0px;
    }
    &::-moz-scrollbar {
      width: 0px;
    }
  }
  //下标激活的类名
  .isSeachActive {
    border-bottom: 3px solid #fc5531;
  }
}
// 动画过渡
.fade-enter,
.fade-leave-to {
  opacity: 1;
  // width: 0;
  // height: 0;
  transform: translateX(120%);
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s linear;
}
.fade-enter-to,
.fade-leave {
  opacity: 1;
  // height: 100%;
  // width: 100%;
  transform: translateX(0);
}
</style>
